<template>
  <el-dialog ref="dia" :visible.sync="visibles" width="475px" @open="handler" @close="fnClose">
    <el-collapse v-if="isShow" style="width: 450px">
      <el-collapse-item :title="option1[activeIndex].text" name="1">
        <button
          v-for="(btnText, i) in option1"
          :key="btnText.value"
          :class="{ activeColor: i == activeIndex }"
          @click="fnActive(btnText.value)"
        >
          {{ btnText.text }}
        </button>
      </el-collapse-item>
    </el-collapse>
    <div id="content" class="content">
      <div class="header">
        <p class="title"><label for="">vin</label> {{ base.vin }}</p>
        <p class="createTime">
          <label for="">报告生成时间</label> {{ base.createTime || "无" }}
        </p>
      </div>
      <div class="top"><span class="tips" />车辆数据</div>
      <div class="item">
        <div class="left">车型名称</div>
        <div class="right">{{ base.cxmc || "无" }}</div>
      </div>
      <div class="item">
        <div class="left">厂商</div>
        <div class="right">{{ base.cs || "无" }}</div>
      </div>
      <div class="item">
        <div class="left">厂商指导价</div>
        <div class="right">{{ base.cszdj || "无" }}</div>
      </div>
      <div class="item">
        <div class="left">上市时间</div>
        <div class="right">{{ base.sssj || "无" }}</div>
      </div>
      <div class="item">
        <div class="left">发动机</div>
        <div class="right">{{ base.fdj || "无" }}</div>
      </div>
      <div class="item">
        <div class="left">变速箱</div>
        <div class="right">{{ base.bsq || "无" }}</div>
      </div>
      <div class="item">
        <div class="left">环保标准</div>
        <div class="right">{{ engine.hbbz || "无" }}</div>
      </div>
      <div class="item">
        <div class="left">车身结构</div>
        <div class="right">{{ base.csjg || "无" }}</div>
      </div>
      <div class="item">
        <div class="left">进气形式</div>
        <div class="right">{{ engine.jqxs || "无" }}</div>
      </div>
      <div class="item">
        <div class="left">燃料形式</div>
        <div class="right">{{ engine.rlxs || "无" }}</div>
      </div>
      <div class="baseLine" />
      <!-- <van-sticky offset-top="50"> -->
      <el-collapse>
        <el-collapse-item :title="option1[activeIndex].text" name="1">
          <button
            v-for="(btnText, i) in option1"
            :key="btnText.value"
            :class="{ activeColor: i == activeIndex }"
            @click="fnActive(btnText.value)"
          >
            {{ btnText.text }}
          </button>
        </el-collapse-item>
      </el-collapse>
      <!-- </van-sticky> -->

      <div ref="scroll" class="myContent">
        <van-tabs v-model="activeIndex" scrollspy sticky>
          <van-tab ref="scrollOne">
            <div class="item">
              <div class="left">车牌号</div>
              <div class="right">{{ base.vin || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">品牌</div>
              <div class="right">{{ base.brandName || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">车系</div>
              <div class="right">{{ base.familyName || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">车型名称</div>
              <div class="right">{{ base.cxmc || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">厂商</div>
              <div class="right">{{ base.cs || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">厂商指导价</div>
              <div class="right">{{ base.cszdj || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">上市时间</div>
              <div class="right">{{ base.sssj || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">发动机</div>
              <div class="right">{{ base.fdj || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">变速箱</div>
              <div class="right">{{ base.bsq || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">长×宽×高(mm)</div>
              <div class="right">{{ base.vehicleSize || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">车身结构</div>
              <div class="right">{{ base.csjg || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">车辆类型/级别</div>
              <div class="right">{{ base.vehicleClass || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">官方0-100加速(s)</div>
              <div class="right">{{ base.gfjs || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">整备质量(kg)</div>
              <div class="right">{{ base.fullWeight || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">整车质保</div>
              <div class="right">{{ base.zczb || "无" }}</div>
            </div>
          </van-tab>
          <van-tab ref="scrollTwo">
            <div class="item myItem" style="background: #f4f7fa">
              <div class="left">车身</div>
            </div>
            <div class="item">
              <div class="left">车门数(个)</div>
              <div class="right">{{ body.cms || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">行李箱容积(L)</div>
              <div class="right">{{ body.xlxrj || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">后轮距(mm)</div>
              <div class="right">{{ body.hlj || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">前轮距(mm)</div>
              <div class="right">{{ body.qlj || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">油箱容积(L)</div>
              <div class="right">{{ body.yxrj || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">轴距(mm)</div>
              <div class="right">{{ body.wheelbase || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">座位数(个)</div>
              <div class="right">{{ body.seat || "无" }}</div>
            </div>
          </van-tab>
          <van-tab ref="scrollThree">
            <div class="item myItem" style="background: #f4f7fa">
              <div class="left">发动机</div>
            </div>
            <div class="item">
              <div class="left">进气形式</div>
              <div class="right">{{ engine.jqxs || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">燃料形式</div>
              <div class="right">{{ engine.rlxs || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">环保标准</div>
              <div class="right">{{ engine.hbbz || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">挡位个数</div>
              <div class="right">{{ engine.gearnum || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">电动机总功率(kW)</div>
              <div class="right">{{ engine.ddjzdgl || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">电动机总扭矩(N·m)</div>
              <div class="right">{{ engine.ddjzdnj || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">发动机电子防盗</div>
              <div class="right">{{ engine.antitheft || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">发动机特有技术</div>
              <div class="right">{{ engine.fdjtyjs || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">发动机型号</div>
              <div class="right">{{ engine.engineModel || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">缸盖材料</div>
              <div class="right">{{ engine.ggcl || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">缸径</div>
              <div class="right">{{ engine.gj || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">缸体材料</div>
              <div class="right">{{ engine.gtcl || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">供油方式</div>
              <div class="right">{{ engine.gyfs || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">每缸气门数(个)</div>
              <div class="right">{{ engine.valvenum || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">排量</div>
              <div class="right">{{ engine.displacement || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">气缸排列形式</div>
              <div class="right">{{ engine.arrayType || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">气门结构(凸轮轴) 配气机构</div>
              <div class="right">{{ engine.pqjg || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">汽缸数(个)</div>
              <div class="right">{{ engine.qgs || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">燃油标记</div>
              <div class="right">{{ engine.rybh || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">压缩比</div>
              <div class="right">{{ engine.ysb || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">最大功率(kW)</div>
              <div class="right">{{ engine.zdgl || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">最大马力(Ps)</div>
              <div class="right">{{ engine.zdml || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">最大扭矩(N·m)</div>
              <div class="right">{{ engine.zdnj || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">最大扭矩转速(N.m)</div>
              <div class="right">{{ engine.zdnjzs || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">发动机启停技术</div>
              <div class="right">{{ engine.fdjqtjs || "无" }}</div>
            </div>
          </van-tab>
          <van-tab>
            <div class="item myItem" style="background: #f4f7fa">
              <div class="left">变速箱</div>
            </div>
            <div class="item">
              <div class="left">变速箱简称</div>
              <div class="right">{{ transmissionCase.jc || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">变速箱简称</div>
              <div class="right">{{ transmissionCase.bxslx || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">四驱形式</div>
              <div class="right">{{ transmissionCase.sqxs || "无" }}</div>
            </div>
            <!-- transmissionCase -->
          </van-tab>
          <van-tab>
            <div class="item myItem" style="background: #f4f7fa">
              <div class="left">底盘转向</div>
            </div>
            <div class="item">
              <div class="left">驱动方式</div>
              <div class="right">{{ chassis.qdfs || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">车体结构</div>
              <div class="right">{{ chassis.ctjg || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">中央差速器锁止功能</div>
              <div class="right">{{ chassis.zycsqszgn || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">助力类型</div>
              <div class="right">{{ chassis.zllx || "无" }}</div>
            </div>
          </van-tab>
          <van-tab>
            <div class="item myItem" style="background: #f4f7fa">
              <div class="left">底盘转向</div>
            </div>
            <div class="item">
              <div class="left">驱动方式</div>
              <div class="right">{{ chassis.qdfs || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">车体结构</div>
              <div class="right">{{ chassis.ctjg || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">中央差速器锁止功能</div>
              <div class="right">{{ chassis.zycsqszgn || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">助力类型</div>
              <div class="right">{{ chassis.zllx || "无" }}</div>
            </div>
          </van-tab>
          <van-tab>
            <div class="item myItem" style="background: #f4f7fa">
              <div class="left">车轮制动</div>
            </div>
            <div class="item">
              <div class="left">外后视镜功能</div>
              <div class="right">{{ wheelBrake.whsjgn || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">备胎规格</div>
              <div class="right">{{ wheelBrake.btgg || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">后轮胎规格</div>
              <div class="right">{{ wheelBrake.hltgg || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">后制动器类型</div>
              <div class="right">{{ wheelBrake.hzdqlx || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">前轮胎规格</div>
              <div class="right">{{ wheelBrake.qltgg || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">前制动器类型</div>
              <div class="right">{{ wheelBrake.qzdqlx || "无" }}</div>
            </div>
          </van-tab>
          <van-tab>
            <div class="item myItem" style="background: #f4f7fa">
              <div class="left">车辆主/被动安全装备</div>
            </div>
            <div class="item">
              <div class="left">ABS防抱死</div>
              <div class="right">{{ safetyEquipment.cdplyjxt || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">GPS导航系统</div>
              <div class="right">{{ safetyEquipment.gps || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">ISOFIX儿童座椅接口</div>
              <div class="right">{{ safetyEquipment.etzyjk || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">安全带未系提示</div>
              <div class="right">{{ safetyEquipment.aqdwjts || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">并线辅助</div>
              <div class="right">{{ safetyEquipment.bxfz || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">刹车辅助(EBA/BAS/BA等)</div>
              <div class="right">{{ safetyEquipment.scfz || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">车身稳定控制(ESC/ESP/DSC等</div>
              <div class="right">{{ safetyEquipment.cswdkz || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">零胎压继续行驶</div>
              <div class="right">{{ safetyEquipment.ltyjxxs || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">全景摄像头</div>
              <div class="right">{{ safetyEquipment.qjsxt || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">膝部气囊</div>
              <div class="right">{{ safetyEquipment.xbqn || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">夜视系统)</div>
              <div class="right">{{ safetyEquipment.ysxt || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">制动力分配(EBD)</div>
              <div class="right">{{ safetyEquipment.zdlfp || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">主动安全</div>
              <div class="right">{{ safetyEquipment.zdscxt || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">主动转向系统</div>
              <div class="right">{{ safetyEquipment.ztzdzxxt || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">驻车制动类型</div>
              <div class="right">{{ safetyEquipment.zczdlx || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">车道偏离预警系统</div>
              <div class="right">{{ safetyEquipment.cdplyjxt || "无" }}</div>
            </div>
            <!-- transmissionCase -->
          </van-tab>
          <van-tab>
            <div class="item myItem" style="background: #f4f7fa">
              <div class="left">辅助/操控配置</div>
            </div>
            <div class="item">
              <div class="left">巡航系统</div>
              <div class="right">{{ auxiliaryOrControl.xhxt || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">前_后驻车雷达</div>
              <div class="right">{{ auxiliaryOrControl.qhzcld || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">驾驶辅助影像</div>
              <div class="right">{{ auxiliaryOrControl.jsfzyx || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">陡坡缓降</div>
              <div class="right">{{ auxiliaryOrControl.dphj || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">后桥限滑差速器/差速锁</div>
              <div class="right">{{ auxiliaryOrControl.hqxhcsq || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">后悬挂类型</div>
              <div class="right">{{ auxiliaryOrControl.hxglx || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">可变悬挂</div>
              <div class="right">{{ auxiliaryOrControl.kbxj || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">可变转向比</div>
              <div class="right">{{ auxiliaryOrControl.kbxj || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">空气悬挂</div>
              <div class="right">{{ auxiliaryOrControl.kqxj || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">前桥限滑差速器/差速锁</div>
              <div class="right">{{ auxiliaryOrControl.qqxhcsq || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">前悬挂类型</div>
              <div class="right">{{ auxiliaryOrControl.qxglx || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">自动倒车入位</div>
              <div class="right">{{ auxiliaryOrControl.zdbcrw || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">自适应巡航控制</div>
              <div class="right">{{ auxiliaryOrControl.zsyxh || "无" }}</div>
            </div>
          </van-tab>
          <van-tab>
            <div class="item myItem" style="background: #f4f7fa">
              <div class="left">外部/防盗配置</div>
            </div>
            <div class="item">
              <div class="left">盗配置_天窗类型</div>
              <div class="right">{{ externalOrAntiTheft.tclx || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">车内中控锁</div>
              <div class="right">{{ externalOrAntiTheft.cnzks || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">电动后备厢</div>
              <div class="right">{{ externalOrAntiTheft.ddhbx || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">电动吸合门</div>
              <div class="right">{{ externalOrAntiTheft.ddxhm || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">无钥匙启动系统</div>
              <div class="right">{{ externalOrAntiTheft.wysqdxt || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">全景天窗</div>
              <div class="right">{{ externalOrAntiTheft.ddxhm || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">运动外观套件</div>
              <div class="right">{{ externalOrAntiTheft.ydwgtj || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">无钥匙进入系统</div>
              <div class="right">{{ externalOrAntiTheft.wysjrxt || "无" }}</div>
            </div>

            <!-- transmissionCase -->
          </van-tab>
          <van-tab>
            <div class="item myItem" style="background: #f4f7fa">
              <div class="left">内部配置</div>
            </div>
            <div class="item">
              <div class="left">多功能方向盘</div>
              <div class="right">{{ inside.dgnfxp || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">方向盘电动调节</div>
              <div class="right">{{ inside.fxpddtj }}</div>
            </div>
            <div class="item">
              <div class="left">方向盘换挡</div>
              <div class="right">{{ inside.fxphd }}</div>
            </div>
            <div class="item">
              <div class="left">中控液晶屏分屏显示</div>
              <div class="right">{{ inside.zkyjpfpxs }}</div>
            </div>
            <div class="item">
              <div class="left">方向盘加热</div>
              <div class="right">{{ inside.fxpjr }}</div>
            </div>
            <!-- transmissionCase -->
          </van-tab>
          <van-tab>
            <div class="item myItem" style="background: #f4f7fa">
              <div class="left">座椅配置</div>
            </div>
            <div class="item">
              <div class="left">主座椅调节方式</div>
              <div class="right">{{ chair.zzytjfs || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">第二排靠背角度调节</div>
              <div class="right">{{ chair.depkbjdtj }}</div>
            </div>
            <div class="item">
              <div class="left">第二排座椅移动</div>
              <div class="right">{{ chair.depzyyd }}</div>
            </div>
            <div class="item">
              <div class="left">第三排座椅</div>
              <div class="right">{{ chair.dspzy }}</div>
            </div>
            <div class="item">
              <div class="left">电动座椅记忆</div>
              <div class="right">{{ chair.ddzyjy }}</div>
            </div>
            <div class="item">
              <div class="left">后排杯架</div>
              <div class="right">{{ chair.hpbj }}</div>
            </div>
            <div class="item">
              <div class="left">后排座椅电动调节</div>
              <div class="right">{{ chair.hpzyddtj }}</div>
            </div>
            <div class="item">
              <div class="left">肩部支撑调节</div>
              <div class="right">{{ chair.hpzyddtj }}</div>
            </div>
            <div class="item">
              <div class="left">运动风格座椅</div>
              <div class="right">{{ chair.ydfgzy }}</div>
            </div>
            <div class="item">
              <div class="left">前/后排座椅按摩</div>
              <div class="right">{{ chair.ydfgzy }}</div>
            </div>
            <div class="item">
              <div class="left">前/后排座椅通风</div>
              <div class="right">{{ chair.qpzytf }}</div>
            </div>

            <!-- transmissionCase -->
          </van-tab>
          <van-tab>
            <div class="item myItem" style="background: #f4f7fa">
              <div class="left">多媒体配置</div>
            </div>
            <div class="item">
              <div class="left">车载CD_DVD</div>
              <div class="right">{{ multiMedia.czcddvd || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">车载电视</div>
              <div class="right">{{ multiMedia.czds }}</div>
            </div>
            <div class="item">
              <div class="left">行车电脑显示屏</div>
              <div class="right">{{ multiMedia.xcdnxsp }}</div>
            </div>
            <div class="item">
              <div class="left">后排液晶屏</div>
              <div class="right">{{ multiMedia.hpyjp }}</div>
            </div>
            <div class="item">
              <div class="left">蓝牙/电话系统</div>
              <div class="right">{{ multiMedia.lyczdh }}</div>
            </div>
            <div class="item">
              <div class="left">外接音源支持</div>
              <div class="right">{{ multiMedia.wjyyjk }}</div>
            </div>

            <!-- transmissionCase -->
          </van-tab>
          <van-tab>
            <div class="item myItem" style="background: #f4f7fa">
              <div class="left">灯光配置</div>
            </div>
            <div class="item">
              <div class="left">车前雾灯</div>
              <div class="right">{{ lighting.cqwd || "无" }}</div>
            </div>
            <div class="item">
              <div class="left">车内氛围灯</div>
              <div class="right">{{ lighting.cnfwd }}</div>
            </div>
            <div class="item">
              <div class="left">大灯高度可调</div>
              <div class="right">{{ lighting.ddgdkt }}</div>
            </div>
            <div class="item">
              <div class="left">大灯清洗装置</div>
              <div class="right">{{ lighting.ddqxzz }}</div>
            </div>
            <div class="item">
              <div class="left">感应大灯</div>
              <div class="right">{{ lighting.ddqxzz }}</div>
            </div>
            <div class="item">
              <div class="left">日间行车灯</div>
              <div class="right">{{ lighting.rjxcd }}</div>
            </div>
            <div class="item">
              <div class="left">转向辅助灯/转向头灯</div>
              <div class="right">{{ inside.fxpjr }}</div>
            </div>
          </van-tab>
          <van-tab>
            <div class="item myItem" style="background: #f4f7fa">
              <div class="left">玻璃/后视镜</div>
            </div>
            <div class="item">
              <div class="left">车窗防夹手功能</div>
              <div class="right">
                {{ glassOrRearviewMirror.ccfjsgn || "无" }}
              </div>
            </div>
            <div class="item">
              <div class="left">感应雨刷</div>
              <div class="right">{{ glassOrRearviewMirror.gyys }}</div>
            </div>
            <div class="item">
              <div class="left">后车窗遮阳帘</div>
              <div class="right">{{ glassOrRearviewMirror.hpczyl }}</div>
            </div>
            <div class="item">
              <div class="left">后风挡遮阳帘</div>
              <div class="right">{{ glassOrRearviewMirror.hfdzyl }}</div>
            </div>
            <div class="item">
              <div class="left">后雨刷</div>
              <div class="right">{{ glassOrRearviewMirror.hys }}</div>
            </div>
            <div class="item">
              <div class="left">遮阳板化妆镜</div>
              <div class="right">{{ glassOrRearviewMirror.zybhzj }}</div>
            </div>
            <div class="item">
              <div class="left">后排侧隐私玻璃</div>
              <div class="right">{{ glassOrRearviewMirror.hpcysbl }}</div>
            </div>
          </van-tab>
          <van-tab>
            <div class="item myItem" style="background: #f4f7fa">
              <div class="left">空调/冰箱</div>
            </div>
            <div class="item">
              <div class="left">车载空气净化器</div>
              <div class="right">
                {{ airConditionerOrRefrigerator.cnkqjh || "无" }}
              </div>
            </div>
            <div class="item">
              <div class="left">车载冰箱</div>
              <div class="right">{{ airConditionerOrRefrigerator.czbx }}</div>
            </div>
            <div class="item">
              <div class="left">后排独立空调</div>
              <div class="right">{{ airConditionerOrRefrigerator.hpdlkt }}</div>
            </div>
            <div class="item">
              <div class="left">温度分区控制</div>
              <div class="right">{{ airConditionerOrRefrigerator.wdfqkz }}</div>
            </div>
            <div class="item">
              <div class="left">车内空气调节/花粉过滤</div>
              <div class="right">{{ airConditionerOrRefrigerator.cnkqtj }}</div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import Vue from 'vue'
import { DropdownMenu, DropdownItem, Sticky, Tab, Tabs } from 'vant'
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Sticky)
Vue.use(Tab)
Vue.use(Tabs)
export default {
  props: {
    visibles: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isShow: false,
      base: {},
      body: {},
      engine: {},
      transmissionCase: {},
      chassis: {},
      wheelBrake: {},
      safetyEquipment: {},
      auxiliaryOrControl: {},
      externalOrAntiTheft: {},
      inside: {},
      chair: {},
      multiMedia: {},
      lighting: {},
      glassOrRearviewMirror: {},
      airConditionerOrRefrigerator: {},
      option1: [
        { text: '基本参数', value: 0 },
        { text: '车身', value: 1 },
        { text: '发动机', value: 2 },
        { text: '变速箱', value: 3 },
        { text: '底盘转向', value: 4 },
        { text: '车轮制动', value: 5 },
        { text: '主/被动安全装备', value: 6 },
        { text: '辅助/操控 配置', value: 7 },
        { text: '外部/防盗 配置', value: 8 },
        { text: '内部配置', value: 9 },
        { text: '座椅配置', value: 10 },
        { text: '多媒体配置', value: 11 },
        { text: '灯光配置', value: 12 },
        { text: '玻璃/后视镜', value: 13 },
        { text: '空调/冰箱', value: 14 }
      ],
      activeIndex: 0
    }
  },
  created() {
    this.$get(`/web/carVinReport/getDetail?id=${this.id}`).then((res) => {
      if (res.data.code === '0') {
        this.base = res.data.data.base || {}
        this.engine = res.data.data.engine || {}
        this.body = res.data.data.body || {}
        this.transmissionCase = res.data.data.transmissionCase || {}
        this.chassis = res.data.data.chassis || {}
        this.wheelBrake = res.data.data.wheelBrake || {}
        this.safetyEquipment = res.data.data.safetyEquipment || {}
        this.auxiliaryOrControl = res.data.data.auxiliaryOrControl || {}
        this.externalOrAntiTheft = res.data.data.externalOrAntiTheft || {}
        this.inside = res.data.data.inside || {}
        this.chair = res.data.data.chair || {}
        this.multiMedia = res.data.data.multiMedia || {}
        this.lighting = res.data.data.lighting || {}
        this.glassOrRearviewMirror =
              res.data.data.glassOrRearviewMirror || {}
        this.airConditionerOrRefrigerator =
              res.data.data.airConditionerOrRefrigerator || {}
      } else {
        this.$message.error(res.data.message)
      }
    })
  },
  methods: {
    fnActive(index) {
      this.activeIndex = index
      this.$nextTick(() => {
        document.querySelector('.van-tab--active').click()
      })
    },
    handleScroll(e) {
      const { scrollTop } = document.getElementById('content')
      if (scrollTop > 800) {
        this.isShow = true
      } else {
        this.isShow = false
      }
    },
    handler() {
      this.$nextTick(() => {
        const dom = document.getElementById('content')
        dom.addEventListener('scroll', this.handleScroll)
        // console.log(dom);
        this.$get(`/web/carVinReport/getDetail?id=${this.id}`).then((res) => {
          if (res.data.code === '0') {
            this.base = res.data.data.base || {}
            this.engine = res.data.data.engine || {}
            this.body = res.data.data.body || {}
            this.transmissionCase = res.data.data.transmissionCase || {}
            this.chassis = res.data.data.chassis || {}
            this.wheelBrake = res.data.data.wheelBrake || {}
            this.safetyEquipment = res.data.data.safetyEquipment || {}
            this.auxiliaryOrControl = res.data.data.auxiliaryOrControl || {}
            this.externalOrAntiTheft = res.data.data.externalOrAntiTheft || {}
            this.inside = res.data.data.inside || {}
            this.chair = res.data.data.chair || {}
            this.multiMedia = res.data.data.multiMedia || {}
            this.lighting = res.data.data.lighting || {}
            this.glassOrRearviewMirror =
              res.data.data.glassOrRearviewMirror || {}
            this.airConditionerOrRefrigerator =
              res.data.data.airConditionerOrRefrigerator || {}
          } else {
            this.$message.error(res.data.message)
          }
        })
      })
    },
    fnClose() {
      this.$emit('fnClose', false)
    }
  }
}
</script>

<style lang="scss" scoped>
button {
  margin-right: 10px;
  font-size: 16px;
  width: 80px;
  height: 40px;
  opacity: 0.6;
  background: #f1f1f1;
  margin-bottom: 10px;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  &.activeColor {
    opacity: 1;
    background: #f4b22d;
    border-radius: 6px;
  }
}
::v-deep .van-tabs__wrap {
  display: none;
}
::v-deep .van-dropdown-menu__bar {
  box-shadow: none;
}
::v-deep .van-dropdown-menu__item {
  background: #f4f7fa;
  // margin-left: 10px;
  width: 100px;
  height: 50px;
}
::v-deep .van-dropdown-menu__title::after {
  border-color: transparent transparent #323232 #323232;
}
::v-deep .van-dropdown-menu__title--active::after {
  border-color: transparent transparent #323232 #323232;
}
.content {
  height: 800px;
  position: relative;
  width: 450px;
  overflow: hidden;
  overflow-y: auto;
  .header {
    font-family: PingFang SC, PingFang SC-Medium;
    height: 120px;
    box-sizing: border-box;
    padding: 28px 29px;
    border-bottom: 10px solid #f4f7fa;
    .title,
    .createTime {
      height: 30px;
      line-height: 30px;
      font-size: 16px;
      font-weight: 500;
      color: #323232;
    }
    label {
      width: 200px;
      display: inline-block;
      font-size: 16px;
      font-weight: 500;
      text-align: left;
      color: #919598;
    }
  }
  .top {
    height: 80px;
    padding: 0 12px;
    line-height: 80px;
    .tips {
      width: 5px;
      height: 26px;
      opacity: 1;
      display: inline-block;
      margin-right: 13px;
      border: 3px solid #f4b22d;
      background: #f4b22d;
      border-radius: 6px;
    }
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    color: #323232;
  }
  .item {
    // height: 88px;
    // line-height: 44px;
    padding: 20px 31px;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    font-size: 16px;
    justify-content: space-between;
    .left {
      color: #919598;
    }
    .right {
      color: #323232;
    }
  }
  .myContent {
    .item {
      height: 44px;
      line-height: 1px;
      padding: 20px 31px;
      border-bottom: 1px solid #f1f1f1;
      display: flex;
      font-size: 16px;
      justify-content: space-between;
      .left {
        color: #919598;
      }
      .right {
        color: #323232;
      }
    }
  }

  button {
    margin-right: 10px;
    font-size: 16px;
    width: 80px;
    height: 40px;
    opacity: 0.6;
    background: #f1f1f1;
    margin-bottom: 10px;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    &.activeColor {
      opacity: 1;
      background: #f4b22d;
      border-radius: 6px;
    }
  }
  .contentDefault {
    height: 392px;
    // width: 100vw;
    padding: 30px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}
</style>
